<template>
  <div id="app">
    <div class="navs-wrapper">
      <div class="navs">
        <div class="logo">
          <a href="/">
            <span class="an">An</span>
            <span class="lin">lin</span>
          </a>
        </div>
        <div class="page">
          <router-link v-for="link in pageLink" :key="link.link" :to="link.link">{{ link.name }}</router-link>
        </div>
        <div class="user">
          <div class="router_link" v-if="!userName">
            <router-link v-for="link in userLink" :key="link.link" :to="link.link">{{ link.name }}</router-link>
          </div>
          <div class="users" v-if="userName">
            <router-link :to="admin.link" v-if="userNameInit">{{ admin.name }}</router-link>
            <router-link :to="users.link">{{ users.name }}</router-link>
            <div class="user-name">
              <p>欢迎您：</p>
              <p>{{ userName }}</p>
              <span
                v-if="hiddenMethods()"
                @click="gotoPsMessage()"
                class="message-number"
              >{{hiddenMethods()}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <musicControl
      @_changeMusicWord="_changeMusicWord"
      v-show="musicControlFlog"
      class="music"
      ref="musicControl"
    ></musicControl>
    <div class="music-toggle" @click="closeMusicControl">
      <i class="el-icon-headset"></i>
    </div>
    <div class="content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { userUrl } from "@/public/uri.js";
import musicControl from "@/components/music-control";
import { mapState, mapActions, mapMutations } from "Vuex";
export default {
  name: "App",
  components: {
    musicControl
  },
  data() {
    return {
      musicControlFlog: true,
      musicWord: false,
      pageLink: [
        {
          name: "博客",
          link: "/blogs"
        },
        {
          name: "资源下载",
          link: "/resource"
        },
        {
          name: "听音乐",
          link: "/music"
        }
        // {
        //   name: "论坛",
        //   link: "/forum"
        // }
      ],
      userLink: [
        {
          name: "登录",
          link: "/log_in"
        },
        {
          name: "免费注册",
          link: "/register"
        }
      ],
      users: {
        name: "用户中心",
        link: "/users"
      },
      admin: {
        name: "管理页面",
        link: "/admin"
      },
      setintervalNumber: -1
    };
  },
  mounted() {
    let data = JSON.parse(localStorage.getItem("from_17yong"));
    if (data && data.savetime) {
      this.loginMetheds(data);
    }

    this.keyDownMethods();
    this.initSessionMusicData();
  },
  watch: {
    userName() {
      if (this.userName) {
        this.getMessage({ userName: this.userName });
        setInterval(() => {
          this.getMessage({ userName: this.userName });
        }, 3000);
      } else {
        clearInterval(this.setintervalNumber);
      }
    },
    $route(now, pre) {
      if (now.name === "log_in") {
        if (
          pre.path !== "/register" &&
          pre.path !== "/find_pw" &&
          pre.path !== "/update_pw"
        ) {
          if (pre.path === "/users/2") {
            this.setPrePath("/users/ps_info");
          } else {
            this.setPrePath(pre.path);
          }
        }
      }
    }
  },
  computed: {
    userNameInit() {
      if (this.userInfoData && this.userInfoData.class === 1) {
        return true;
      } else {
        return false;
      }
    },
    ...mapState("user", ["userName", "userMessage", "userInfoData"])
  },
  methods: {
    keyMethods(e) {
      if (e.keyCode === 32) {
        e.preventDefault();
        this.$refs.musicControl.togglePlayed();
      } else if (e.keyCode === 38) {
        e.preventDefault();
        this.$refs.musicControl._addChangeVolume(0.1);
      } else if (e.keyCode === 40) {
        e.preventDefault();
        this.$refs.musicControl._backChangeVolume(0.1);
      }
    },
    closeKeyDownMethods() {
      let body = document.getElementsByTagName("body")[0];
      body.removeEventListener("keydown", this.keyMethods);
    },
    keyDownMethods() {
      let body = document.getElementsByTagName("body")[0];
      body.addEventListener("keydown", this.keyMethods);
    },
    _changeMusicWord(Bool) {
      this.musicWord = Bool;
    },
    closeMusicControl() {
      // 切换音乐播放器的显示和隐藏
      this.musicControlFlog = !this.musicControlFlog;
      if (this.musicControlFlog) {
        this.keyDownMethods();
      } else {
        this.closeKeyDownMethods();
      }
    },
    hiddenMethods() {
      let data = this.userMessage;
      let length = data.length;
      let number = 0;
      for (let i = 0; i < length; i++) {
        if (!data[i].status) {
          number += 1;
        }
      }
      return number;
    },
    gotoPsMessage() {
      this.$router.push("/users/ps_message");
    },
    loginMetheds(data) {
      let datas = new FormData();
      datas.append("email", data.email);
      datas.append("password", data.password);
      datas.append("imgyzm", data.imgyzm);
      datas.append("savetime", data.savetime);
      this.$axios
        .post(`${userUrl}/log_operation/login`, datas)
        .then(res => {
          if (res.data.ok === 1) {
            this.$store.commit("user/setInitFlog", 1);
            this.$store.commit("user/setUserName", data.email);
            this.getUserInfoData(data.email);
          } else {
            this.$store.commit("user/setInitFlog", 0);
            this.$message({
              type: "wraning",
              message: res.data.data
            });
          }
        })
        .catch(err => {
          alert("500：" + err);
        });
    },
    ...mapActions("user", ["getUserInfoData", "getMessage"]),
    ...mapMutations("user", ["setPrePath"]),
    ...mapMutations("music", ["initSessionMusicData"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
#app
  width: 100%
  background-color: #f6f6f6
  .navs-wrapper
    background-color: #fff
    height: 7vh
    position: relative
    box-shadow: 2px 2px 5px rgba(0,0,0,.1)
    .navs
      width: 1280px
      margin: 0 auto
      height: 100%
      @include flex(flex-start,center)
      .logo
        flex: 0 0 8%
        height: 100%
        font-size: 26px
        font-weight: 700
        @include flex(flex-start,center)
        .an
          color: #0487dc
        .lin
          color: #2eb037
    .page
      flex: 1
      height: 100%
      padding: 0 1%
      @include flex(flex-start,center)
      >a
        padding: 0 20px
        height: 100%
        margin-right: 2%
        color: #666
        transition: all .5s 
        @include flex(center,center)
        &:hover
          background-color: #f6f6f6  
          transition: all .5s  
      .router-link-active
        position: relative
        &:after
          position: absolute
          content: ""
          width: 50%
          height: 2px
          bottom: 0
          display: block
          left: 25%
          background-color: #eb2001     
    .user
      flex: 0 0 30%
      height: 100%
      padding: 0 1%
      @include flex(flex-end,center)
      .router_link        
        height: 100%
        @include flex(flex-end,center)
        >a
          padding: 0 12px
          height: 100%
          color: #666
          transition: all .5s  
          @include flex(center,center)
          &:hover
            background-color: #f6f6f6    
            transition: all .5s   
        .router-link-active
          position: relative
          &:after
            position: absolute
            content: ""
            width: 70%
            height: 2px
            bottom: 0
            display: block
            left: 15%
            background-color: #eb2001 
      .users
        height: 100%
        @include flex(flex-end,center)
        >a
          padding: 0 12px
          height: 100%
          color: #666
          transition: all .5s  
          @include flex(center,center)
          &:hover
            background-color: #f6f6f6    
            transition: all .5s   
        .router-link-active
          position: relative
          &:after
            position: absolute
            content: ""
            width: 70%
            height: 2px
            bottom: 0
            display: block
            left: 15%
            background-color: #eb2001 
        .user-name
          flex: 0 0 50px
          height: 100%
          position: relative
          @include align(center)
          >span
            position: absolute
            width: 26px
            height: 16px
            background-color: #eb2001
            border-radius: 8px
            color: #fff
            top: 20px
            right: 0
            cursor: pointer
            @include flex(center,center)
  .content
    width: 100%
    min-height: 93vh
  .music
    position: fixed
    left: 0
    bottom: 0
    z-index: 100
  .music-toggle
    position: fixed
    right: 50px
    bottom: 90px
    background-color: #0487dc
    width: 30px
    height: 30px
    border-radius: 50%
    overflow: hidden
    @include flex(center,center)
    box-shadow: 2px 2px 2px rgba(0,0,0,.2)
    cursor: pointer
    z-index: 100
    >i
      font-size: 21px
      color: #fff
    &:hover
      background-color: #666
      color: #eee
  
</style>


<style lang="sass">
@import '@/assets/marked.sass'
@import '@/assets/scrollBar.sass'
</style>